<template>
	<up-popup :show="showPopup" :safe-area-inset-bottom="true" mode="bottom" :round="16" @close="closePopup">
		<view class="popup-bottom-container">
			<view class="popup-header">退改规则</view>
			<view class="popup-close" @click="closePopup"></view>
			<view class="popup-content safe-bottom-wrap ticket-rule">
				<view class="sub-title">
					<view class="bar"></view>
					<view class="value">用户取消</view>
				</view>
				<view class="table">
					<view class="header">
						<view class="th td-width border-right">取消时间</view>
						<view class="th">损失费用</view>
					</view>
					<view class="tr border-bottom">
						<view class="td td-width border-right">使用日期前1天18:00(含)之前</view>
						<view class="td">0</view>
					</view>
					<view class="tr">
						<view class="td td-width border-right">使用日期当天前申请取消</view>
						<view class="td">100%</view>
					</view>
				</view>
				<view class="notic">如使用优惠，则损失费用按照优惠前金额的比例收取，最高不超过实付金额。</view>
				<view class="notic">*产品不支持部分退</view>

				<view class="hr"></view>
				<view class="sub-title">
					<view class="bar"></view>
					<view class="value">商家取消</view>
				</view>
				<view class="notic">*损失费用按照优惠前金额收取,最高不超过实付金额。</view>
				<view class="notic">
					订单确认后商家取消，除退还全额费用外，还需按以下标准赔付违约金(不可抗因素除外)
				</view>
				<view class="table">
					<view class="header">
						<view class="th td-width-2 border-right">取消时间</view>
						<view class="th">损失费用</view>
					</view>
					<view class="tr">
						<view class="td td-width-2">使用日期前1天12:00(含)之前</view>
						<view class="td border-left">
							不低于同时段用户取消损失费:最少额外赔付 订单金额的10%(若不足50元赔付50元)
						</view>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>
<script setup lang="ts">
const props = defineProps({
	modelValue: Boolean,
	listData: {
		type: Array,
		default: [],
	},
})
const emit = defineEmits(["update:modelValue"])

const showPopup = ref(props.modelValue)
watch(
	() => props.modelValue,
	(newVal) => {
		showPopup.value = !!newVal
	}
)

// 处理关闭按钮点击
const closePopup = () => {
	showPopup.value = false
	emit("update:modelValue", false)
}
</script>

<style scoped lang="scss">
.popup-content {
	padding: 24rpx;
	.sub-title {
		font-weight: 500;
		font-size: 28rpx;
		color: #1d2129;
		display: flex;
		align-items: center;
		.bar {
			width: 6rpx;
			height: 24rpx;
			background: #fee038;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
		}
		.value {
			margin-left: 12rpx;
		}
	}
	.table {
		border: 1rpx solid #e9eaee;
		border-radius: 16rpx;
		margin: 24rpx 0;
		overflow: hidden;
		.header {
			background: #f8f8f9;
			border-bottom: 1rpx solid #e9eaee;
			display: flex;
			align-items: center;
			.th {
				padding: 24rpx;
				color: #86909c;
			}
			.th:first-child {
				flex-shrink: 0;
			}
		}
		.tr {
			display: flex;
			align-items: center;
			.td {
				padding: 24rpx;
				height: 100%;
			}
			.td:first-child {
				flex-shrink: 0;
			}
		}
		.td-width {
			width: 554rpx;
		}
		.td-width-2 {
			width: 402rpx;
		}
		.border-right {
			border-right: 1rpx solid #e9eaee;
		}
		.border-left {
			border-left: 1rpx solid #e9eaee;
		}
		.border-bottom {
			border-bottom: 1rpx solid #e9eaee;
		}
	}
	.hr {
		border-top: 1px solid #e5e6eb;
		margin: 30rpx 0;
	}
	.notic {
		font-weight: 400;
		font-size: 28rpx;
		color: #4e5969;
		margin: 24rpx 0;
	}
}
</style>
